<template>
	<view class="container">
		<scroll-view scroll-y class="content">
			<view class="title" :style="{ marginTop: safeTop + 'px' }">个人中心</view>

			<!-- 登录后 -->
			<view v-if="isLogin">
				<!-- 用户信息区域 -->
				<view class="user-section">
					<view class="user-info">
						<view class="avatar-container" @click="goToSetting">
							<image :src="userInfo.avatar || '/static/images/f.png'" class="user-avatar"
								mode="aspectFill" />
						</view>
						<view class="user-details">
							<view style="display: flex;align-items: center;">
								<text class="user-name">{{ userInfo.nickname || '未设置昵称' }}</text>
								<text class="identity-tag">居间人</text>
							</view>
						</view>

						<!-- 设置按钮 -->
						<view class="setting-icon">
							<image src="/static/base/user-center/seting.png" class="setting-img" mode="aspectFit"
								@click="goToSetting" />
						</view>

						<!-- 分享邀请按钮（仅居间人显示） -->
						<view v-if="userInfo.identity == 3" class="setting-icon" style="margin-left: 20rpx;"
							@click="goToDesignerApply">
							<button open-type="share" class="share-btn">
								<image src="/static/base/tablebar/designer.png" class="setting-img" mode="aspectFit" />
							</button>
						</view>
					</view>
				</view>

				<view class="vip-income-box">
					<!-- 收益 -->
					<view class="stats-header" @click="goToStats">
						<image src="/static/base/user-center/incom-bg.png" class="income-bg"></image>
						<view class="stat-item-first" style="justify-self: left;margin-bottom: 10rpx;">
							<text class="stat-number-first">{{ userInfo.income || '0.00' }}</text>
							<text class="stat-label">累计收益 (元)</text>
						</view>
						<view class="stats-view">
							<image style="width: 35rpx;height: 35rpx;" src="/static/base/more.png"></image>
						</view>
					</view>
				</view>
				
				<!-- 我的团队 -->
				<view class="team-section">
					<view class="stats-header" @click="goToTeamList">
						<text class="section-title" style="line-height: 70rpx;">我的团队</text>
						<view class="more-btn"><image style="width: 35rpx;height: 35rpx;" src="/static/base/more.png"></image></view>
					</view>
				</view>

			</view>

			<!-- 登录前 -->
			<view v-else>
				<!-- 用户信息区域 -->
				<view class="user-section">
					<view class="user-info">
						<view class="avatar-container">
							<image src="/static/images/f.png" class="user-avatar" mode="aspectFill" />
						</view>
						<view class="user-details" @click="openLogin">
							<text class="user-name">点击登录</text>
						</view>
					</view>
				</view>

				<view class="vip-income-box">
					<!-- 收益 -->
					<view class="stats-header" @click="openLogin">
						<image src="/static/base/user-center/incom-bg.png" class="income-bg"></image>
						<view class="stat-item-first" style="justify-self: left;margin-bottom: 10rpx;">
							<text class="stat-number-first">{{ userInfo.income || '0.00' }}</text>
							<text class="stat-label">累计收益 (元)</text>
						</view>
						<text class="stats-view">
							<image style="width: 55rpx;height: 55rpx;" src="/static/base/more.png"></image>
						</text>
					</view>
				</view>
				
				<!-- 我的团队 -->
				<view class="team-section">
					<view class="stats-header">
						<text class="section-title">我的团队</text>
						<text class="more-btn" @click="openLogin">管理团队</text>
					</view>
				</view>
			</view>

			<view style="height: 139rpx;"></view>
		</scroll-view>

		<!-- <TableBar :current="3" :messagecount="messagecount" /> -->
	</view>
</template>

<script>
	import TableBar from '@/components/base/table-bar/Index.vue'
	import {
		getBaseUserInfo
	} from '@/api/base/user-center';
	import {
		mapGetters
	} from 'vuex'
	import Cache from '@/utils/cache';
	import {
		USER_INFO,
		UID,
		LOGIN_STATUS
	} from '@/config/cache';

	export default {
		components: {
			TableBar
		},
		computed: {
			...mapGetters(['isLogin'])
		},
		data() {
			return {
				messagecount: 0,
				safeTop: 0,
				currentUId: '0',
				userInfo: {
					uid: 0,
					nickname: '',
					avatar: '',
					income: '0.00',
					identity: 0,
					phoneNumber: ''
				}
			}
		},
		onLoad(option) {
			const {
				barTop
			} = this.$util.getWXStatusHeight();
			this.safeTop = barTop + 20;
		},
		onShow() {
			if (this.isLogin) {
				this.currentUId = Cache.get(UID);
				this.getUserInfo();
				this.initMessage();
			}
		},
		// 关键：必须实现 onShareAppMessage 才能触发分享
		onShareAppMessage() {
			// 这里复用您原始的分享逻辑
			return {
				imageUrl: 'https://test.accmee.com/uploads/store/comment/20251030/98e870f0575949314086df6f475d2133.jpg',
				title: '好友邀请您成为设计师',
				path: '/pages/sub_base/designer-apply/index?invite_uid=' + this.userInfo.uid + '&invite_nickname=' + this
					.userInfo.nickname
			}
		},
		methods: {
			initMessage() {
				// 可选：保持消息通知逻辑
			},
			getUserInfo() {
				getBaseUserInfo().then(res => {
					if (res.status === 200 && res.data) {
						this.userInfo = {
							...this.userInfo,
							...res.data,
							phoneNumber: res.data.phone,
							income: res.data.income || '0.00'
						};
					}
				}).catch(err => {
					console.log('获取用户信息失败', err);
				});
			},
			openLogin() {
				//#ifdef MP
				uni.navigateTo({
					url: '/pages/users/wechat_login/index'
				});
				//#endif
				//#ifdef H5
				uni.navigateTo({
					url: '/pages/users/login/index'
				});
				//#endif
			},
			goToSetting() {
				uni.navigateTo({
					url: '/pages/users/user_info/index'
				})
			},
			goToStats() {
				uni.navigateTo({
					url: '/pages/base/between-home/more-data/index'
				})
			},
			goToTeamList() {
				if (!this.isLogin) {
					this.openLogin();
					return;
				}
				uni.navigateTo({
					url: '/pages/base/between-home/team/index'
				})
			},
			// 分享前的预处理逻辑（可选）
			goToDesignerApply() {
				// 此处可添加分享前的埋点/参数校验等逻辑
				console.log('准备分享邀请');
			}
		}
	}
</script>

<style scoped>
	.container {
		/* min-height: 100vh; */
		background-color: #F2F8FC;
	}

	.title {
		font-size: 42rpx;
		margin-bottom: 14rpx;
		text-align: center;
	}

	.content {
		/* height: calc(100vh - 44rpx); */
	}

	.user-section {
		background-color: #ffffff;
		margin: 9rpx 17rpx;
		border-radius: 21rpx;
		padding: 28rpx;
	}

	.user-info {
		display: flex;
		align-items: center;
	}

	.identity-tag {
		background-color: #E6F2F9;
		color: #84BDE3;
		padding: 2rpx 12rpx;
		border-radius: 12rpx;
		margin-left: 20rpx;
		font-size: 22rpx;
	}

	.avatar-container {
		position: relative;
	}

	.user-avatar {
		width: 104rpx;
		height: 104rpx;
		border-radius: 52rpx;
	}

	.user-details {
		flex: 1;
		margin-left: 28rpx;
	}

	.user-name {
		font-size: 42rpx;
		font-weight: 500;
		color: #333333;
	}

	.setting-icon,
	.setting-img {
		width: 42rpx;
		height: 42rpx;
	}

	/* 数据统计区 */
	.stats-section {
		margin: 17rpx 17rpx;
		padding: 28rpx;
		background-color: #fff;
		border-radius: 21rpx;
	}

	.stats-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 28rpx;
	}

	.section-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #333333;
	}

	.more-btn {
		font-size: 24rpx;
		color: #000000;
		display: flex;
		align-items: center;
		gap: 4rpx;
	}

	.stat-item-first {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.stat-number-first {
		font-size: 47rpx;
		font-weight: 600;
		color: #000;
	}

	.stat-label {
		font-size: 24rpx;
		color: #666666;
	}

	/* 团队区 */
	.team-section {
		margin: 30rpx 30rpx;
		background-color: #fff;
		border-radius: 21rpx;
	}

	.team-placeholder {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 120rpx;
		font-size: 24rpx;
		color: #999;
	}

	/* 新增分享按钮样式 */
	.share-btn {
		width: 42rpx;
		height: 42rpx;
		padding: 0;
		margin: 0;
		border: none;
		background: transparent;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.share-btn::after {
		border: none;
	}

	.vip-income-box {
		margin-top: 30rpx;
		padding: 0 30rpx;
	}

	.stats-header {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 40rpx;
	}

	.income-bg {
		position: absolute;
		top: -20rpx;
		left: -22rpx;
		width: 106%;
		height: 120%;
		/* z-index: -1; */
	}

	.stat-item-first,
	.stat-item {

		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		position: relative;
	}

	.stat-number-first {
		font-size: 47rpx;
		font-weight: 600;
		color: #000;
	}


	.stat-label {
		font-size: 24rpx;
		color: #666666;
	}

	.stats-view {
		z-index: 999;
		margin-right: 10rpx;
		/* font-size: 35rpx; */
		/* color: #666666; */
		/* border-bottom: 2rpx solid #000; */
	}
</style>